<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Example: Formatting Dates Using Language Resource Bundles</title>
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.4.0pr3/build/cssgrids/grids-min.css">
    <link rel="stylesheet" href="../assets/css/main.css">
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
    <script src="../../build/yui/yui-min.js"></script>
</head>
<body>

<div id="doc">
    <h1>Example: Formatting Dates Using Language Resource Bundles</h1>

    

    <div class="yui3-g">
        <div id="main" class="yui3-u">
            <div class="content"><style scoped>
/* custom styles for this example */

#default_lang_output, #single_lang_output {
    font-style:italic;
}

#event_output {
    margin-left:1em;
    color:#00aa00;
    font-style:italic;
}

#demo .output {
    margin-bottom:1em;
    padding:10px;
    border:1px solid #D9D9D9;
}

#demo_output.rtl {
    text-align:right;
}

#switchlang   {
    margin-top:3em;
}
</style>

<div class="intro">
    <p>The "date-format" module of the DataType Utility leverages the external language resource bundle support provided in 3.1.0, as the preferred way to define and deliver formatting patterns for various languages.</p>
</div>

<div class="example yui3-skin-sam">
    <div id="demo">

    <div class="output"><span>Default Date Formatting (no language specified):</span> <span id="default_lang_output"></span></div>
    <div class="output"><span>Date Formatted for "fr-FR":</span> <span id="single_lang_output"></span></div>

    <form id="switchlang">
        <fieldset>
            <label for="demo_lang">Language:
                <select id="demo_lang"></select>
            </label>
            <input type="button" id="demo_btn" value="Format Current Date/Time">
            <div id="event_output">&nbsp;</div>
        </fieldset>
    </form>

    <div id="demo_output" class="output"></div>

</div>

<script>

var langNames = {
    "ar": "العربية",
    "ar-JO": "العربية (الأردن)",
    "ca": "català",
    "ca-ES": "català (Espanya)",
    "da": "dansk",
    "da-DK": "dansk (Danmark)",
    "de": "Deutsch",
    "de-AT": "Deutsch (Österreich)",
    "de-DE": "Deutsch (Deutschland)",
    "el": "ελληνικά",
    "el-GR": "ελληνικά (Ελλάδα)",
    "en": "English",
    "en-AU": "English (Australia)",
    "en-CA": "English (Canada)",
    "en-GB": "English (U.K.)",
    "en-IE": "English (Ireland)",
    "en-IN": "English (India)",
    "en-JO": "English (Jordan)",
    "en-MY": "English (Malaysia)",
    "en-NZ": "English (New Zealand)",
    "en-PH": "English (Philippines)",
    "en-SG": "English (Singapore)",
    "en-US": "English (U.S.)",
    "es": "español",
    "es-AR": "español (Argentina)",
    "es-BO": "español (Bolivia)",
    "es-CL": "español (Chile)",
    "es-CO": "español (Colombia)",
    "es-EC": "español (Ecuador)",
    "es-ES": "español (España)",
    "es-MX": "español (México)",
    "es-PE": "español (Perú)",
    "es-PY": "español (Paraguay)",
    "es-US": "español (Estados Unidos)",
    "es-UY": "español (Uruguay)",
    "es-VE": "español (Venezuela)",
    "fi": "suomi",
    "fi-FI": "suomi (Suomi)",
    "fr": "français",
    "fr-BE": "français (Belgique)",
    "fr-CA": "français (Canada)",
    "fr-FR": "français (France)",
    "hi": "हिंदी",
    "hi-IN": "हिंदी (भारत)",
    "id": "Bahasa Indonesia",
    "id-ID": "Bahasa Indonesia (Indonesia)",
    "it": "italiano",
    "it-IT": "italiano (Italia)",
    "ja": "日本語",
    "ja-JP": "日本語 (日本)",
    "ko": "한국어",
    "ko-KR": "한국어 (대한민국)",
    "ms": "Bahasa Melayu",
    "ms-MY": "Bahasa Melayu (Malaysia)",
    "nb": "norsk",
    "nb-NO": "norsk (Norge)",
    "nl": "Nederlands",
    "nl-BE": "Nederlands (België)",
    "nl-NL": "Nederlands (Nederland)",
    "pl": "polski",
    "pl-PL": "polski (Polska)",
    "pt": "português",
    "pt-BR": "português (Brasil)",
    "ro": "română",
    "ro-RO": "română (România)",
    "ru": "русский",
    "ru-RU": "русский (Россия)",
    "sv": "svenska",
    "sv-SE": "svenska (Sverige)",
    "th": "ไทย",
    "th-TH": "ไทย (ประเทศไทย)",
    "tr": "Türkçe",
    "tr-TR": "Türkçe (Türkiye)",
    "vi": "Tiếng Việt",
    "vi-VN": "Tiếng Việt (Việt Nam)",
    "zh-Hans": "中文（简体）",
    "zh-Hans-CN": "中文 (中国)",
    "zh-Hant": "繁體中文",
    "zh-Hant-HK": "中文 (香港)",
    "zh-Hant-TW": "中文 (臺灣)"
};

function isRTL(lang) {
    var pos = lang.indexOf("-");
    if (pos >= 0) {
        lang = lang.substring(0, pos);
    }
    // currently Arabic is our only RTL language
    return lang === "ar";
}
    

// Default Date Format (no language specified)
YUI().use("node", "datatype-date", function (Y) {
    
    Y.one("#default_lang_output").setContent(
        Y.DataType.Date.format(new Date(), {format:"%x"})
    );

});

// Configure the YUI instance to use fr-FR
YUI({lang:"fr-FR"}).use("node", "datatype-date", function (Y) {

    Y.one("#single_lang_output").setContent(
        Y.DataType.Date.format(new Date(), {format:"%x"})
    );
    
});

YUI().use("node", "datatype-date", function (Y) {

    // Insert the languages available for the datatype-date module
    var availLangs = Y.Intl.getAvailableLangs("datatype-date-format"),
        select = Y.one("#demo_lang"),
        i, lang, langName, dir;

    for (i = 0; i < availLangs.length; i++) {
        lang = availLangs[i];
        langName = langNames[lang] || lang;
        dir = isRTL(lang) ? "rtl" : "ltr";
        select.append('<option value="' + lang + '" dir="' + dir + '">' + langName + '</option>');
        select.addClass("yui3-avail-languages");
    }

    // Listen for language change
    Y.Intl.on("intl:langChange", function(e) {
        Y.one("#event_output").setContent('Language for "' + e.module + '" changed to "' + e.newVal + '"');
    });

    Y.on("click", function(e) {

        var lang = Y.one("#demo_lang").get("value"),
            output = Y.one("#demo_output");

        // Pull down a new language resource bundle for datatype-date
        Y.use("lang/datatype-date-format_" + lang, function(Y) {

            // You only need to set the language explicitly when switching languages,
            // It is not required for the single language use case instances shown previously.
            Y.Intl.setLang("datatype-date-format", lang);

            var formattedDate = Y.DataType.Date.format(new Date(), {format:"%c"}),
                rtl = isRTL(lang);

            output.setContent(formattedDate)
            output.setAttribute("dir", rtl ? "rtl" : "ltr")
            output.toggleClass("rtl", rtl);
        });

    }, "#demo_btn");
});
</script>

</div>

<h2>Using Date Formatting Support</h2>

<p>To use Date formatting language resource bundle support in your application, all you need to do is use the <code>datatype-date</code> module, and specify the (supported) language you need for the instance.</p>

<pre class="code prettyprint">&#x2F;&#x2F; Default (no language specified)
YUI().use(&quot;datatype-date&quot;, function (Y) {
    Y.one(&quot;#default_lang_output&quot;).setContent(
        Y.DataType.Date.format(new Date(), {format:&quot;%x&quot;})
    );
});

&#x2F;&#x2F; Format Date For fr-FR
YUI({lang:&quot;fr-FR&quot;}).use(&quot;datatype-date&quot;, function (Y) {
    Y.one(&quot;#single_lang_output&quot;).setContent(
        Y.DataType.Date.format(new Date(), {format:&quot;%x&quot;})
    );
});</pre>


<h2>Switching Languages</h2>

<p>You can also switch the language resource bundle currently in use for your YUI instance, by invoking <code>Y.use</code> to pull down another language resource bundle if required:</p>

<pre class="code prettyprint">...

var lang = Y.one(&quot;#demo_lang&quot;).get(&quot;value&quot;);

&#x2F;&#x2F; Pull down a new language resource bundle for datatype-date.

&#x2F;&#x2F; Since it&#x27;s a potentially async operation, we write our application logic
&#x2F;&#x2F; in a callback which is invoked once the new language resource bundle is pulled down

Y.use(&quot;lang&#x2F;datatype-date-format_&quot; + lang, function(Y) {

    &#x2F;&#x2F; You only need to set the language explicitly when switching languages,
    &#x2F;&#x2F; It is not required for the single language use case shown previously.
    Y.Intl.setLang(&quot;datatype-date-format&quot;, lang);

    formattedDate = Y.DataType.Date.format(new Date(), {format:&quot;%c&quot;});

});
...</pre>


<p>The <code>Y.Intl</code> utility, which is automatically pulled down with a language resource bundle acts as a manager for language resource bundle handling, and is used to register new language resource bundles, set the language currently being used, and retrieve strings for the currently language.</p>

<h2>Available Languages</h2>

<p>The set of available languages for a given module, can be obtained from the <code>Intl</code> utility, and we use this support to generate the dropdown for this example:</p>

<pre class="code prettyprint">&#x2F;&#x2F; Insert the languages available for the datatype-date module
var availLangs = Y.Intl.getAvailableLangs(&quot;datatype-date-format&quot;),
    select = Y.one(&quot;#demo_lang&quot;),
    i;

for (i = 0; i &lt; availLangs.length; i++) {
    select.append(&#x27;&lt;option value=&quot;&#x27; + availLangs[i] + &#x27;&quot;&gt;&#x27; + availLangs[i] + &#x27;&lt;&#x2F;option&gt;&#x27;);
}</pre>


</div>
        </div>

        <div id="sidebar" class="yui3-u">
            

            
                <div class="sidebox">
                    <div class="hd">
                        <h2 class="no-toc">Examples</h2>
                    </div>

                    <div class="bd">
                        <ul class="examples">
                            
                                
                                    <li data-description="Formatting dates into strings.">
                                        <a href="datatype-dateformat.html">DataType.Date.format()</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Formatting dates into strings using pre-packaged language resource bundles.">
                                        <a href="datatype-dateformat-lang.html">Formatting Dates Using Language Resource Bundles</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Parsing data into dates.">
                                        <a href="datatype-dateparse.html">DataType.Date.parse()</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Formatting numbers into strings.">
                                        <a href="datatype-numberformat.html">DataType.Number.format()</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Parsing data into numbers.">
                                        <a href="datatype-numberparse.html">DataType.Number.parse()</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Formatting XML documents into strings.">
                                        <a href="datatype-xmlformat.html">DataType.XML.format()</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Parsing strings into XML documents.">
                                        <a href="datatype-xmlparse.html">DataType.XML.parse()</a>
                                    </li>
                                
                            
                        </ul>
                    </div>
                </div>
            

            
        </div>
    </div>
</div>

<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>

</body>
</html>
